<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>START</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url('./src/splash.jpg');
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <script>
        /*
        首先声明一个计时器 times
        还有一个固定时间 planTime
        */
        let times = 0;
        let planTime = 900;

        function formatTime() {
            let hours = (Math.floor(times / 3600));
            let minutes = Math.floor(times / 60);
            minutes = (minutes - (hours * 60));
            return "已专注: " + hours + " 小时 " + minutes + " 分钟 ";
        }


        function playAudio() {
            let mp3Url = "./src/bowl.wav";
            let player = new Audio(mp3Url);
            player.play(); //播放 mp3这个音频对象
        }

        function displayTime() {
            let date = new Date();
            times++;
            console.log(date, times, planTime, formatTime());
            if (times % planTime == 0) {
                playAudio();
            }
            document.title = formatTime();
        }

        setInterval(displayTime, 1000);
        playAudio();
    </script>
</body>

</html>